<template>
<div>
  <tag-select v-if="gradesVisible" :options="grades" label="年级" :value.sync="grade" :showDefault="!hideDefault"></tag-select>
  <tag-select v-if="subjectsVisible" :options="subjects" label="科目" :value.sync="subject" :showDefault="!hideDefault"></tag-select>
  <tag-select v-if="editionsVisible" :options="editions" label="教材版本" :value.sync="edition" :showDefault="!hideDefault"></tag-select>
</div>
</template>

<script>
import TagSelect from './TagSelect'
import { mapActions, mapGetters } from 'vuex'

export default {
  components: {
    TagSelect
  },
  props: {
    hideDefault: {
      type: Boolean,
      default: false
    },
    gradesVisible: {
      type: Boolean,
      default: true
    },
    editionsVisible: {
      type: Boolean,
      default: true
    },
    subjectsVisible: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    grade(val) {
      this.setItem('grade', val)
    },
    subject(val) {
      this.setItem('subject', val)
    },
    edition(val) {
      this.setItem('edition', val)
    }
  },
  data() {
    return {
      grade: null,
      edition: null,
      subject: null
    }
  },
  computed: {
    ...mapGetters({
      grades: 'grades',
      editions: 'editions',
      subjects: 'subjects'
    })
  },
  methods: {
    ...mapActions({
      loadGrades: 'loadGrades',
      loadSubjects: 'loadSubjects',
      loadEditions: 'loadEditions'
    }),
    setItem(key, value) {
      this[key] = value
      this.$emit('changed', {
        grade: this.grade,
        edition: this.edition,
        subject: this.subject
      })
    }
  },
  mounted() {
    this.loadGrades()
    this.loadEditions()
    this.loadSubjects()
  }
}
</script>
